<template>
  <!-- 确认企业信息 -->
  <div class="app-container-add">
    <el-row :gutter="10" class="button-wrap" :style="{width:mainContentWidth + 'px','left':'80px'}">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
      </el-col>
      <el-col v-if="msgType && status==='2'" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="mini" :disabled="isBtnDisa" @click="handleConfirm(true)">同意</el-button>
      </el-col>
      <el-col v-if="msgType && status==='2'" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document" size="mini" :disabled="isBtnDisa" @click="handleConfirm()">拒绝</el-button>
      </el-col>
    </el-row>
    <div class="main-content">
      <el-card ref="mainContent" class="box-card" shadow="never">
        <div class="main-content-body">
          <el-form ref="formData" class="data-form" :model="formData" label-width="80px">
            <div class="data-form-item">
              <div class="two-level-title">基本信息</div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="企业名称" prop="name">
                    <el-input v-model="formData.name" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="企业类型" prop="sysEnterpriseType">
                    <el-select :value="formData.sysEnterpriseType" readonly style="width: 100%">
                      <el-option
                        v-for="item in supperType"
                        :key="item.id"
                        :label="item.typeName"
                        :value="item.typeNum"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="信用代码" prop="creditCodePic">
                    <el-input v-model="formData.creditCodePic" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单位法人" prop="legalperson">
                    <el-input v-model="formData.legalperson" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="详细地址" prop="address">
                    <el-input v-model="formData.address" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="成立日期" prop="establishmentTime ">
                    <el-date-picker
                      :value="formData.establishmentTime"
                      readonly
                      value-format="yyyy-MM-dd"
                      style="width:100%"
                      type="date"
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="企业等级" prop="qualificationLevel">
                    <el-select :value="formData.qualificationLevel" readonly style="width: 100%" placeholder="">
                      <el-option
                        v-for="item in proGrade"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="userdName">
                    <label slot="label" v-html="`曾&ensp;用&ensp;名`" />
                    <el-input v-model="formData.userdName" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="contacts">
                    <label slot="label" v-html="`联&ensp;系&ensp;人`" />
                    <el-input v-model="formData.contacts" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="formData.phone" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="企业类别" prop="foreignCompany">
                    <el-radio-group :value="formData.foreignCompany" readonly size="medium">
                      <el-radio label="1">本地企业</el-radio>
                      <el-radio label="0">外地企业</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="营业执照">
                    <previewImg :img-id-list="businessLicensePicList" @getFileIdsList="getbusinessLicensePic" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 证件列表
import { mapState } from 'vuex'
import { PersonAddEnterprise } from '@/api/PersonalOffice/info/enterpriseInfo'
import { listNoPermission } from '@/api/superviseBaseInfo/typeManage/organizationType'
import { updateAccountStatus } from '@/api/system/enterpriseRecord/index'
// 页面组件- 附件上传
import previewImg from '@/components/basicinfo/previewImg'
export default {
  name: 'CompanyInfo',
  components: {
    previewImg
  },
  data() {
    return {
      mainContentWidth: '',
      msgType: '',
      supperType: [], // 企业类型
      edit: '0', // 0:不可编辑 1:编辑
      isBtnDisa: false,
      status: '',
      /* 图片上传 start*/
      businessLicensePicList: [], // 上传的营业执照
      /* 图片上传 end*/
      /* 信息 start */
      formData: {
        datestablishmentTimee: '', // 成立日期
        qualificationLevel: '', // 企业等级
        name: '', // 企业名称
        userdName: '', // 曾用名
        nature: '', // 企业性质
        legalperson: '', // 单位法人
        creditCodePic: '', // 信用代码
        address: '', // 详细地址
        contacts: '', // 联系人
        phone: '', // 联系电话
        unitCreditCodePicUrl: '', // 营业执照
        foreignCompany: ''
      },
      queryObj: {
        sysApplyRecord: {}
      }
      /* 信息 end */
    }
  },
  computed: {
    ...mapState({
      userId: state => state.user.userInfo.userId,
      proGrade: state => state.basicInfo.proGrade
    })
  },
  watch: {
    queryObj: {
      deep: true,
      immediate: true,
      handler(value) {
        const { msgType, status, enterpriseId, sysApplyRecord } = this.queryObj
        this.msgType = msgType
        this.status = status
        this.sysApplyRecord = sysApplyRecord
        this.status = sysApplyRecord.status
        this.getDetailById(enterpriseId) // 获取企业详情
        this.getSupperType() // 企业类型
        this.$store.dispatch('basicInfo/getSysDictsProGrade') // 企业等级
      }
    }

  },
  beforeRouteEnter(to, from, next) {
    const enterMessage = sessionStorage.getItem('enterMessage')
    console.log(to.query)
    if (!enterMessage) {
      sessionStorage.setItem('enterMessage', JSON.stringify(to.query))
      next(vm => {
        vm.queryObj = to.query
      })
    } else {
      next(vm => {
        vm.queryObj = JSON.parse(enterMessage)
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.removeItem('enterMessage')
    next()
  },
  mounted() {
    /** 获取主题内容宽度 start*/
    setTimeout(() => {
      this.mainContentWidth = this.$refs.mainContent.$el.offsetWidth
    }, 100)
    const that = this
    window.onresize = () => {
      return (() => {
        that.mainContentWidth = that.$refs.mainContent.$el.offsetWidth
      })()
    }
    /** 获取主题内容宽度 end*/
  },
  methods: {
    async getSupperType() {
      const query = { typeVal: 1 }
      const { data: { rows }} = await listNoPermission(query)
      this.supperType = rows
    },
    async getDetailById(id) {
      const { data } = await PersonAddEnterprise(id)
      if (data) {
        this.formData = { ...data }
        this.businessLicensePicList = data.unitCreditCodePicUrl.split(',')
      }
    },
    // 营业执照
    getbusinessLicensePic(fileIdsList) {
      this.formData.unitCreditCodePicUrl = fileIdsList.join(',')
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },
    // 确认
    handleConfirm(isAgree) {
      if (isAgree) {
        this.$confirm('是否同意加入?', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消'
        }).then(async() => { // 同意审批
          const { code, message } = await updateAccountStatus({ ...this.sysApplyRecord, status: '0' })
          if (code === 200) {
            this.msgSuccess('加入企业成功, 请重新登录!')
            this.$router.go(-1)
          } else if (code === 202) {
            this.msgWarning(message)
            this.$router.go(-1)
          }
        }).catch(() => {})
      } else { // 审批被拒绝
        this.$confirm('是否拒绝加入', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(async() => {
          const { code } = await updateAccountStatus({ ...this.sysApplyRecord, status: '1' })
          if (code === 200) {
            this.msgWarning('拒绝加入企业')
            this.$router.go(-1)
          }
        }).catch(() => {})
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .certificate-wrap {
    .certi-item {
      margin-bottom: 20px;
      border-radius: 4px;
      padding: 5px 20px;
      box-sizing: border-box;
      border: 1px solid #e0d7d7;
      .certi-titile {
        font-size: 16px;
        line-height: 36px;
        margin:0 0 15px;
        text-align: left;
        border-bottom: 1px solid #e0d7d7;
        color: #1890ff;
      }
      .certi-ipt-wrap {
        display: flex;
        justify-content: space-around;
      }
    }
    .el-form-item {
      display: block;
    }
    .el-checkbox {
      margin-bottom: 10px;
      font-weight: normal;
    }
  }
</style>
